<template>
  <div class="quick-link-container">
    <swiper :indicator-dots="true" class="swiper">
      <swiper-item v-for="paging in swiperNum" :key="paging">
        <u-grid :border="false" :col="props.data.rowNum">
          <u-grid-item
            v-for="(item, index) in QuickList.slice((paging - 1) * (props.data.rowNum * 2), paging * (props.data.rowNum * 2))"
            :key="index"
            class="quick-link-item"
            style="margin-bottom: 30rpx"
            @click="goMenu(item)"
          >
            <image :src="item.imgUrl" style="width: 14vw; height: 14vw"></image>
            <text class="grid-text">{{ item.title }}</text>
          </u-grid-item>
        </u-grid>
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const QuickList = computed(() => {
  return props.data.list;
});

// 分页数量
const swiperNum = computed(() => {
  return props.data?.list ? Math.ceil(props.data?.list.length / (props.data.rowNum * 2)) : 0;
});

function goMenu(item) {
  uni.showToast({
    title: "功能建设中，敬请期待",
  });
}
</script>

<style lang="scss" scoped>
.quick-link-container {
  width: 100vw;
  padding-top: 30rpx;
  background-color: white;
}

.grid-text {
  padding: 20rpx 0 20rpx 0rpx;
  font-size: 26rpx;
}

.swiper {
  height: 420rpx;
}
</style>
